<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />

    <input
      type="file"
      hidden
      ref="input"
      accept=".png,.jpg"
      @change="onSlected"
    />
    <van-cell title="头像" is-link @click="$refs.input.click()"
      ><van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo"
    /></van-cell>

    <van-cell title="昵称" is-link @click="isShowNcname = true">{{
      userInfo.name
    }}</van-cell>

    <van-cell title="性别" is-link @click="isShowGender = true">{{
      userInfo.gender === 0 ? '男' : '女'
    }}</van-cell>

    <van-cell title="生日" is-link @click="isShowBirthday = true">{{
      userInfo.birthday
    }}</van-cell>

    <!-- 更新昵称弹层 -->
    <van-popup
      v-model="isShowNcname"
      position="bottom"
      :style="{ height: '100%' }"
      ><update-nickname
        v-if="userInfo.name && isShowNcname"
        @close="isShowNcname = false"
        :name.sync="userInfo.name"
      ></update-nickname
    ></van-popup>
    <!-- 更新性别弹层 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <up-date-gender
        :gender.sync="userInfo.gender"
        v-if="userInfo.name && isShowGender"
        @close="isShowGender = false"
      ></up-date-gender
    ></van-popup>
    <!-- 更新生日弹层 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <update-birthday
        :birthday.sync="userInfo.birthday"
        @close="isShowBirthday = false"
        v-if="userInfo.birthday && isShowBirthday"
      ></update-birthday>
    </van-popup>
    <!-- 更新头像弹层 -->
    <van-popup
      v-model="isShowAvater"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <update-avater
        :photo="photo"
        @close="isShowAvater = false"
        v-if="isShowAvater"
        @update-photo=";[(userInfo.photo = $event), (isShowAvater = false)]"
      ></update-avater>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfileAPI } from '@/api/index'
import UpdateNickname from './components/UpdateNickname.vue'
import UpDateGender from './components/UpDateGender.vue'
import UpdateBirthday from './components/UpdateBirthday.vue'
import UpdateAvater from './components/UpdateAvater.vue'
import { resolveTobase64 } from '@/utils'
export default {
  components: {
    UpdateNickname,
    UpDateGender,
    UpdateBirthday,
    UpdateAvater
  },
  data() {
    return {
      userInfo: '',
      isShowNcname: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvater: false,
      photo: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    async getUserProfile() {
      const { data } = await getUserProfileAPI()
      this.userInfo = data.data
    },
    async onSlected() {
      //获取用户选择的文件（保持在input.files)
      const file = this.$refs.input.files[0]

      //将file对象转成bass64
      const base64 = await resolveTobase64(file)
      this.photo = base64
      this.isShowAvater = true
      this.$refs.input.value = ''
    }
  }
}
</script>

<style></style>
